<!-- 梯形 -->
<template>
  <div class="trapezium">

    <!-- 正常 -->
    <div class="one">
      <div class="left"></div>
      <div class="center"></div>
      <div class="right"></div>
    </div>

    <!-- 倒 -->
    <div class="two">
      <div class="left"></div>
      <div class="center"></div>
      <div class="right"></div>
    </div>

  </div>
</template>

<script>
export default {
  name: "Trapezium",
  mounted() {},
  computed: {},
  props: {},
  data() {
    return {};
  },
  methods: {},
};
</script>

<style lang="less" scoped>
.trapezium {
  display: flex;

  .one {
    display: flex;
    .left {
      width: 0px;
      height: 0px;
      // border-width: 0 0 60px 60px;
      // border-style: solid;
      // border-color: transparent transparent @primary-color;
      border-bottom: 60px solid @primary-color;
      border-left: 60px solid transparent;
    }

    .center {
      width: 100px;
      height: 60px;
      background-color: @primary-color;
    }

    .right {
      width: 0px;
      height: 0px;
      // border-width: 0 60px 60px 0;
      // border-style: solid;
      // border-color: transparent transparent @primary-color;
      border-bottom: 60px solid @primary-color;
      border-right: 60px solid transparent;
    }
  }

  .two {
    display: flex;
    margin-left: 20px;

    .left {
      width: 0px;
      height: 0px;
      // border-width: 0 0 60px 60px;
      // border-style: solid;
      // border-color: transparent transparent @primary-color;
      // transform: rotate(270deg);
      border-top: 60px solid @primary-color;
      border-left: 60px solid transparent;
    }

    .center {
      width: 100px;
      height: 60px;
      background-color: @primary-color;
    }

    .right {
      width: 0px;
      height: 0px;
      // border-width: 0 60px 60px 0;
      // border-style: solid;
      // border-color: transparent transparent @primary-color;
      // transform: rotate(90deg);
      border-top: 60px solid @primary-color;
      border-right: 60px solid transparent;
    }
  }
}
</style>
